<template>

  <div class="strut-div">
    <div class="mt-card">
      <div class="mt-card-top clear-float">
        <div class="ct-item" v-for="(data, index) in topTotalData" :key="index">
          <p class="c-title">{{data.name}}</p>
          <div class="c-num lcd-font"> <count-to :end="Math.round(data.value)"></count-to></div>
        </div>
      </div>
      <div class="mt-card-middle">
        <div class="mt-card-container">
          <div class="mt-type type1"></div>
          <div class="mt-type type2"></div>
          <div class="mt-type type3"></div>
          <div class="mt-type type4"></div>

          <div class="mt-arrow arrow1"></div>
          <div class="mt-arrow arrow2"></div>
          <div class="mt-arrow arrow3"></div>
          <div class="mt-arrow arrow4"></div>

          <div class="mt-center1"></div>

          <div class="mt-center2"></div>
          <div class="mt-center3"></div>

          <div class="ball-container">
            <div class="mt-ball ball-1"> <p>省级经济开发区</p> </div>
            <div class="mt-ball ball-2"> <p>设施农业区</p> </div>
            <div class="mt-ball ball-3"> <p>农村产业融合发展区</p> </div>
            <div class="mt-ball ball-4"> <p>生物技术区</p> </div>
            <div class="mt-ball ball-5"> <p>特色农产品加工交易园</p> </div>
            <div class="mt-ball ball-6"> <p>高新技术产业孵化园</p> </div>
            <div class="mt-ball ball-7"> <p>农谷科技创新城</p> </div>
            <div class="mt-ball ball-8"> <p>绿色养殖产业区</p> </div>
            <div class="mt-ball ball-9"> <p>北方林果科技园</p> </div>
            <div class="mt-ball ball-10"> <p>红枣苗木特色产业区</p> </div>
          </div>
        </div>
      </div>
      <div class="mt-card-bottom"><div @click="toTaigu">进入太谷农业概况</div></div>
    </div>
    <div class="mb-card">
      <agricultural-insurance-chart></agricultural-insurance-chart>
    </div>
  </div>
</template>

<script>
  import agriculturalInsuranceChart from './agricultural-insurance-chart.vue';
  import CountTo from '@/components/count-to';
  import {
    topTotalData
  } from '@/network/tg-fake-data.js'

  export default {
    name:'sx-middle',
    components:{
      agriculturalInsuranceChart,
	  CountTo
    },
    data() {
      return {
        topTotalData: topTotalData
      }
    },
    methods: {
      toTaigu() {
        this.$router.replace({
          name:"TgDigitalAgriculture"
        })
      }
    },
  }
</script>

<style scoped lang="scss" type="text/scss">
.mt-card {
  width: 100%;
  height: 992px;
  position: relative;
  background: url(../../../assets/imgs/tg/middle-card.png) no-repeat;

  .mt-card-top {
    padding: 75px 46px 0 46px;

    > .ct-item {
      width: 145px;
      height: 90px;
      margin: 10px 16px;
      float: left;
      > .c-title {
        height: 43px;
        line-height: 43px;
        font-size: 16px;
      }
      > .c-num {
        width: 145px;
        height: 47px;
        text-align: center;
        line-height: 55px;
        color: #ffcb03;
        font-size: 36px;
        background: url(../../../assets/imgs/tg/number-bg.png);
      }
    }
  }

  .mt-card-container {
    position: relative;

    > .mt-type {
      width: 141px;
      height: 95px;
      position: absolute;
    }
    .type1 {
      background: url(../../../assets/imgs/tg/type-1.png) no-repeat;
      left: 65px;
      top: 20px;
      animation: type-ani-1 3s 0.30s infinite ease-in-out;
    }
    .type2 {
      background: url(../../../assets/imgs/tg/type-2.png) no-repeat;
      right: 65px;
      top: 20px;
      animation: type-ani-1 3s 1s infinite ease-in-out;
    }
    .type3 {
      background: url(../../../assets/imgs/tg/type-3.png) no-repeat;
      left: 65px;
      top: 120px;
      animation: type-ani-2 3s 1.30s infinite ease-in-out;
    }
    .type4 {
      background: url(../../../assets/imgs/tg/type-4.png) no-repeat;
      right: 65px;
      top: 120px;
      animation: type-ani-2 3s 2s infinite ease-in-out;
    }

    @keyframes type-ani-1 {
      0% {
        top: 20px;
      }
      50% {
        top: 30px;
      }
      100% {
        top: 20px;
      }
    }

    @keyframes type-ani-2 {
      0% {
        top: 120px;
      }
      50% {
        top: 130px;
      }
      100% {
        top: 120px;
      }
    }

    > .mt-arrow {
      width: 145px;
      height: 72px;
      position: absolute;
    }
    > .arrow1 {
      background: url(../../../assets/imgs/tg/arrow-1.png) no-repeat;
      top: 40px;
      left: 205px;
    }
    > .arrow2 {
      background: url(../../../assets/imgs/tg/arrow-2.png) no-repeat;
      top: 40px;
      right: 205px;
    }
    > .arrow3 {
      background: url(../../../assets/imgs/tg/arrow-3.png) no-repeat;
      top: 120px;
      left: 205px;
    }
    > .arrow4 {
      background: url(../../../assets/imgs/tg/arrow-4.png) no-repeat;
      top: 120px;
      right: 205px;
    }

    > .mt-center1 {
      width: 222px;
      height: 206px;
      position: absolute;
      background: url(../../../assets/imgs/tg/center-1.png) no-repeat;
      left: 50%;
      top: 55px;
      transform: translateX(-50%);
    }

    > .mt-center2 {
      width: 802px;
      height: 594px;
      position: absolute;
      left: 1.5px;
      background: url(../../../assets/imgs/tg/center-2.png) no-repeat;
      top: 145px;
    }

    > .mt-center3 {
      width: 740px;
      height: 239px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 261px;
      background: url(../../../assets/imgs/tg/center-3.png) no-repeat;
    }

    > .ball-container {
      position: absolute;
      width: 100%;
      height: 805px;
      top: 200px;

      // transform: rotateX(55deg);

      > .mt-ball {
        width: 102px;
        height: 104px;
        background: url(../../../assets/imgs/tg/ball.png) no-repeat;
        position: absolute;
        transform: rotateX(0deg);
        >p {
          width: 180px;
          font-size: 18px;
          color: #BCFFCA;
          text-align: center;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 25px;
        }
      }

      > .ball-1 {
        top: 30px;
        left: 150px;
        transform: scale(0.8);
        opacity: 0.6;
        animation: ball-ani1 30s infinite linear;
      }

      > .ball-2 {
        top: 70px;
        left: 80px;
        transform: scale(0.85);
        opacity: 0.7;
        animation: ball-ani2 30s infinite linear;
      }

      > .ball-3 {
        top: 140px;
        left: 50px;
        transform: scale(0.9);
        opacity: 0.8;
        animation: ball-ani3 30s infinite linear;
      }

      > .ball-4 {
        top: 180px;
        left: 150px;
        transform: scale(0.95);
        opacity: 0.9;
        animation: ball-ani4 30s infinite linear;
      }

      > .ball-5 {
        top: 200px;
        left: 280px;
        transform: scale(1);
        opacity: 1;
        animation: ball-ani5 30s infinite linear;
      }

      > .ball-6 {
        top: 200px;
        left: 420px;
        transform: scale(1);
        opacity: 1;
        animation: ball-ani6 30s infinite linear;
      }

      > .ball-7 {
        top: 180px;
        left: 550px;
        transform: scale(0.95);
        opacity: 0.9;
        animation: ball-ani7 30s infinite linear;
      }

      > .ball-8 {
        top: 140px;
        left: 655px;
        transform: scale(0.9);
        opacity: 0.8;
        animation: ball-ani8 30s infinite linear;
      }

      > .ball-9 {
        top: 70px;
        left: 625px;
        transform: scale(0.85);
        opacity: 0.7;
        animation: ball-ani9 30s infinite linear;
      }
      > .ball-10 {
        top: 30px;
        left: 550px;
        transform: scale(0.8);
        opacity: 0.6;
        animation: ball-ani10 30s infinite linear;
      }

      @keyframes ball-ani1 {
        0% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        10% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        20% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        30% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        40% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        50% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
        60% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        70% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        80% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        90% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }

        93% {
          opacity: 0;
        }
        97% {
          opacity: 0;
        }
        100% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }
      }

      @keyframes ball-ani2 {
        0% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        10% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        20% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        30% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        40% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
        50% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        60% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        70% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        80% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        83% {
          opacity: 0;
        }
        87% {
          opacity: 0;
        }
        90% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }

        100% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }
      }

      @keyframes ball-ani3 {
        0% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        10% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        20% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        30% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
        40% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        50% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        60% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        70% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        73% {
          opacity: 0;
        }
        77% {
          opacity: 0;
        }
        80% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        90% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }

        100% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
      }

      @keyframes ball-ani4 {
        0% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        10% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        20% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
        30% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        40% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        50% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        60% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        63% {
          opacity: 0;
        }
        67% {
          opacity: 0;
        }
        70% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }

        80% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }

        90% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }

        100% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
      }

      @keyframes ball-ani5 {
        0% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        10% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
        20% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        30% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        40% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        50% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        53% {
          opacity: 0;
        }
        57% {
          opacity: 0;
        }
        60% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }

        70% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }

        80% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        90% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        100% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
      }

      @keyframes ball-ani6 {
        0% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
        10% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        20% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        30% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        40% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        43% {
          opacity: 0;
        }
        47% {
          opacity: 0;
        }
        50% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }

        60% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        70% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        80% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        90% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        100% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
      }

      @keyframes ball-ani7 {
        0% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        10% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        20% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        30% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        33% {
          opacity: 0;
        }
        37% {
          opacity: 0;
        }
        40% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }

        50% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        60% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        70% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        80% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        90% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
        100% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
      }

      @keyframes ball-ani8 {
        0% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        10% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        20% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        23% {
          opacity: 0;
        }
        27% {
          opacity: 0;
        }
        30% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }

        40% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        50% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        60% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        70% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        80% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }
        90% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        100% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
      }

      @keyframes ball-ani9 {
        0% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        10% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        13% {
          opacity: 0;
        }
        17% {
          opacity: 0;
        }
        20% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        30% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        40% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        50% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        60% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        70% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }

        80% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        90% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }

        100% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
      }

      @keyframes ball-ani10 {
        0% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        3% {
          opacity: 0;
        }
        7% {
          opacity: 0;
        }
        10% {
          top: 30px;
          left: 150px;
          transform: scale(0.8);
          opacity: 0.6;
        }
        20% {
          top: 70px;
          left: 80px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        30% {
          top: 140px;
          left: 50px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        40% {
          top: 180px;
          left: 150px;
          transform: scale(0.95);
          opacity: 0.9;
        }
        50% {
          top: 200px;
          left: 280px;
          transform: scale(1);
          opacity: 1;
        }
        60% {
          top: 200px;
          left: 420px;
          transform: scale(1);
          opacity: 1;
        }

        70% {
          top: 180px;
          left: 550px;
          transform: scale(0.95);
          opacity: 0.9;
        }

        80% {
          top: 140px;
          left: 655px;
          transform: scale(0.9);
          opacity: 0.8;
        }
        90% {
          top: 70px;
          left: 625px;
          transform: scale(0.85);
          opacity: 0.7;
        }
        100% {
          top: 30px;
          left: 550px;
          transform: scale(0.8);
          opacity: 0.6;
        }
      }
    }
  }

  .mt-card-bottom {
    text-align:center;
    position:absolute;
    width:100%;
    bottom:60px;

    >div {
      width: 421px;
      height: 64px;
      background: url(../../../assets/imgs/tg/middle-card-button.png);
      display: inline-block;
      font-size: 22px;
      line-height: 64px;
      color: #FFCB03;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.mb-card {
  margin-top: 20px;
}
</style>
